<template>
  <div>  <el-table
    :data="imageUrls"
    style="width: 1000px">
    <el-table-column
      label="名称"
      width="180">
      <template slot-scope="scope">
        <span>{{ scope.row.path }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="缩略图"
      width="180">
      <template slot-scope="scope">
        <img :src="'http://localhost:3000/' +scope.row.path"/>
      </template>
    </el-table-column>
    <el-table-column
    label="大小"
    width="180">
    <template slot-scope="scope">
      <span>{{ scope.row.size }}</span>
    </template>
  </el-table-column>
  <el-table-column
  label="类型"
  width="180">
  <template slot-scope="scope">
    <span>{{ scope.row.type }}</span>
  </template>
</el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <span class="demonstration">页数较少时的效果</span>
    <el-pagination
      layout="prev, pager, next"
      :total="50"
      :current-page.sync="currentPage"
      v-model="currentPage"
      @current-change="handleCurrentPageChange"
      >
    </el-pagination>
  </div>
</div>
</template>
  <script>
  import axios from 'axios';
  
  export default {
    name:"ImageList",
    data() {
      return {
        imageUrls: [],
        currentPage:1
      };
    },
  
    mounted() {
      axios.get('http://localhost:3000/files',{
      params: {
      page: this.currentPage // 这里将page设置为1，可以根据需要修改
  }
})
        .then(response => {
          this.imageUrls = response.data;
          console.log(this.imageUrls);
          console.log(this.imageUrls.length);
          console.log(this.currentPage);
        })
        .catch(error => {
          console.error(error);
        });
        
    },
    methods: {
      handleCurrentPageChange(newPage) {
      console.log('选中的页码：', newPage)
      this.currentPage=newPage
      axios.get('http://localhost:3000/files',{
      params: {
      page:newPage// 这里将page设置为1，可以根据需要修改
  }
})
        .then(response => {
          this.imageUrls = response.data;
          console.log(this.imageUrls);
          console.log(this.imageUrls.length);
          console.log(this.currentPage);
        })
        .catch(error => {
          console.error(error);
        });
    },
      change() {
        axios.get('http://localhost:3000/files',{
      params: {
      page:this.currentPage// 这里将page设置为1，可以根据需要修改
  }
})
        .then(response => {
          this.imageUrls = response.data;
          console.log(this.imageUrls);
          console.log(this.imageUrls.length);
          console.log(this.currentPage);
        })
        .catch(error => {
          console.error(error);
        });
    },
      handleDelete(index, row) {
        console.log(row.path);
        axios.delete('http://localhost:3000/delete-file', { params: { fileName:'./routes/uploads/'+ row.path } });
        this.change()
      }
    }

  };
  </script>
  <style>
  img{
    height: 100px;
    width: 100px;
  }
</style>
